<template>
  <div class="history">
    <section>
        <span>历史记录</span>
        <span style="color:red" @click="$store.commit('delect')">全部删除</span>
    </section>
    <ul>
        <li v-for="(item,index) in history" :key="index" @click="$emit('search',item)">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs,computed } from "vue";
import { useStore } from 'vuex';
export default {
  setup() {
    const { state } = useStore();
    const history = computed(() => state.history);
    return{
        history
    }
  },
};
</script>
<style lang="scss" scoped>
.history{
  section{
    height: 40px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
  }
  ul{
    display: flex;
    padding: 15px;
    flex-wrap: wrap;
    li{
      padding: 3px 15px;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin-right: 10px;
    }
  }
}
</style>